<template>
  <md-popup id="popup-container" v-model="value" position="bottom" :has-mask="true" prevent-scroll @hide="cancel">
    <md-popup-title-bar title="是否走高速" ok-text="确认" cancel-text="取消" @confirm="confirm" @cancel="cancel"></md-popup-title-bar>
    <div class="container">
      <md-picker ref="picker" :data="pickerData" :cols="1" :default-index="pickerDefaultIndex" is-view @change="onPickerConfirm" @initialed="pickerInited"></md-picker>
    </div>
  </md-popup>
</template>

<script>
import { Popup, PopupTitleBar, Picker } from 'mand-mobile';
import { SET_USE_HIGHWAY } from '@/store/mutations.types';
export default {
  name: 'highway-selector',
  components: {
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Picker.name]: Picker
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    appendTo: {
      default: () => document.body
    }
  },
  data() {
    return {
      pickerDefaultIndex: [0],
      pickerData: [
        [
          {
            text: '不走高速',
            value: '0'
          },
          {
            text: '走高速（高速费由我承担）',
            value: '1'
          }
        ]
      ],
      selected: null
    };
  },
  methods: {
    confirm() {
      this.$store.commit(SET_USE_HIGHWAY, this.selected);
      this.value = false;
      this.$emit('submit');
    },
    cancel() {
      this.value = false;
      this.$emit('cancel');
    },
    pickerInited() {
      this.selected = this.$refs.picker.getColumnValues()[0];
      this.$refs.picker.refresh();
    },
    onPickerConfirm(columnIndex, itemIndex, value) {
      this.selected = value;
    }
  },
  mounted() {
    if (this.appendTo) {
      this.appendTo.appendChild(this.$el);
    }
  },
  beforeDestroy() {
    if (this.appendTo) {
      this.appendTo.removeChild(this.$el);
    }
  }
};
</script>

<style lang="stylus" scoped>
#popup-container {
  .container {
    background-color: #fff;
    height: 432px;
    width: 100vw;
    font-size: 22px;
  }
}
</style>
